Frontend Forever App
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it now
Intall Later
Run
HTML
CSS
Javascript
Output
C
o
to F
o
Convert
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;500;700;800;900&display=swap'); body { font-family: 'Poppins', sans-serif; margin: 0; background: #222; color: #555; min-height: 100vh; flex-direction: column; display: flex; align-items: center; justify-content: center; } body h1 { color: dodgerblue; font-size: 5em; text-shadow: 0 0 30px dodgerblue; } body input[type="number"] { background: transparent; outline: none; min-width: 300px; border: 3px solid #555; border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; color: #666; padding: 10px; transition: 0.6s; } body input[type="number"]:focus { border-bottom-color: dodgerblue; } body button { padding: 10px 20px; background: transparent; outline: none; border: 3px solid #555; border-radius: 10px; color: #555; transtion: 1s; cursor: pointer; } body button:hover { border-color: dodgerblue; color: dodgerblue; }
const celiacsValue = document.querySelector("#celiacs"); const output = document.querySelector("h3"); const btn = document.querySelector("button"); celiacs = (f) => { return 5/9 * (f - 32); } btn.onclick = () => { if (celiacsValue.value == "") { output.innerHTML = ""; } else { output.innerHTML = `${celiacs(celiacsValue.value)}` + " F
o
"; } }